<div #calendar class="x-calendar">
  <div class="x-calendar-header">
    <x-date-picker [(ngModel)]="datetime" [type]="model"></x-date-picker>
    <x-buttons>
      <x-button (click)="action(-1)">{{ model === 'month' ? locale.lastMonth : locale.lastYear }}</x-button>
      <x-button (click)="action(1)">{{ model === 'month' ? locale.nextMonth : locale.nextYear }}</x-button>
    </x-buttons>
    <x-radio [data]="radioData" [(ngModel)]="model" (ngModelChange)="modelOnChange()" button></x-radio>
  </div>
  <div class="x-calendar-body">
    <x-picker-date
      *ngIf="model === 'month'"
      [display]="datetime"
      (modelChange)="dateOnChange($event)"
      (rangeChange)="rangeOnChange($event)"
      [dateTemp]="dateTemp"
    ></x-picker-date>
    <x-picker-month
      *ngIf="model === 'year'"
      [display]="datetime"
      (modelChange)="dateOnChange($event)"
      (rangeChange)="rangeOnChange($event)"
      [monthTemp]="monthTemp"
    ></x-picker-month>
  </div>
</div>

<ng-template #dateTemp let-date="date$">
  <div class="x-calendar-date" [class.x-activated]="(date | date: 'yyyyMMdd') === (activatedDate | date: 'yyyyMMdd')">
    <span [title]="date | date: 'yyyy-MM-dd'">{{ date | date: 'd' }}</span>
    <div class="x-calendar-date-content">
      <ul *ngIf="getDate(date)">
        <li *ngFor="let item of getDate(date); trackBy: trackByDate">
          <span [title]="item.id + item.label">{{ item.id }}{{ item.label }}</span>
        </li>
      </ul>
    </div>
  </div>
</ng-template>

<ng-template #monthTemp let-date="date$">
  <div class="x-calendar-month" [class.x-activated]="(date | date: 'yyyyMM') === (activatedDate | date: 'yyyyMM')">
    <span [title]="date | date: 'yyyy-MM'">{{ getLocaleMonth(date) }}</span>
    <div class="x-calendar-month-content">
      <ul *ngIf="getMonth(date)">
        <li *ngFor="let item of getMonth(date); trackBy: trackByMonth">
          <x-link x-tooltip [content]="item.label" placement="top">{{ item.id }}</x-link>
        </li>
      </ul>
    </div>
  </div>
</ng-template>
